<template>
    <div class="wrap">
        <div class="login-wrap" v-if='loginShow'>
            <div class="login-title">乐享商城后台</div>
            <div id="darkbannerwrap"></div>
            <input type="text" @keyup.enter="login" v-model="account" placeholder="请输入账号">
            <input type="password" @keyup.enter="login"  v-model="password" placeholder="请输入密码">
            <!-- <div class="login-tips" @click="forget">忘记密码？</div> -->
             <div class="login-button">
                <button class="btn btn-primary" type="button"  @click="login">登录</button>
            </div>
        </div>

        <div class="login-wrap" v-if='!loginShow'>
            <div class="login-title">乐享商城后台-忘记密码</div>
            <div id="darkbannerwrap"></div>
            <input type="text" v-model="mobile" placeholder="手机号" @keyup.enter="modify">
            <div class="code">
                <input type="text" v-model="code" placeholder="验证码" @keyup.enter="modify" class="code_input" maxlength="6">
                <div class="code_btn" @click.stop="sendCode">{{codeText}}</div>
            </div>
            <input type="password"  v-model="newPWD" placeholder="新密码" @keyup.enter="modify">
            <input type="password"  v-model="confirmNewPWD " placeholder="确认新密码" @keyup.enter="modify">
            <div class="login-tips" @click="forget">去登录</div>
            <div class="login-button">
                <button class="btn btn-primary" type="button" @click="modify">确认修改</button>
            </div>
        </div>

    </div>
</template>

<script>
let CONSTANT = require('../../constant/constant.js'),
    common = require('../../common.js');
import Vue from 'vue'
export default {
    name: 'login',
    data() {
        return {
            account:'',
            password:'',
            loginShow:true,
            //
            tipToggle:false,
            mobile:'',
            code:'',
            codeText:'获取验证码',
            newPWD:'',
            confirmNewPWD:'',
            codeLock:false,
            modifyLock:false,
        }
    },
    mounted(){
        // window.localStorage.removeItem('jwt');
        // Vue.http.options.headers.jwt = '';
        sessionStorage.removeItem('manager');
    },
    methods:{
        login(){
             let url = CONSTANT.URL.ADMIN.LOGIN;
             let param = {'userName':this.account,'password':this.password };
            //  let param = JSON.stringify(data);
             this.$http.post(url, param, {emulateJSON:true}).then(res => {
                 let data = res.data;
                 if(data.status == 200){
                    this.$message({
                        type: 'success',
                        message: '登录成功!'
                    });
                   //  console.log(data.data.bussData.sessionId);
                    sessionStorage.setItem('sessionId',data.data.bussData.sessionId);
                    sessionStorage.setItem('manager',this.account);
                    this.$router.push('/');
                 }
                 else{
                    this.$message({
                         type: 'warning',
                         message:data.msg
                    });
                 }
             }, res => {
                 // error callback
             });
        },
        forget(){
            this.loginShow = !this.loginShow;
        },
        sendCode(){
            if(this.codeLock){ return false ;}
            if(!this.mobile){ this.$message({type:'warning',message:'手机号不能为空'}); return false;}
            if(this.mobile && !(/^1[34578]\d{9}$/.test(this.mobile))) {this.$message({type:'warning',message:'手机号不合法'}); return false;return false;}
            // if(!this.code){ this.$message({type:'warning',message:'验证码不能为空'}); return false;}
            // if(!this.newPWD){ this.$message({type:'warning',message:'密码不能为空'}); return false;}
            // if(!this.confirmNewPWD){ this.$message({type:'warning',message:'请确认新密码'}); return false;}
            this.codeLock = true;
            this.checkMobile();
        },
        checkMobile(){
            this.$http.post(CONSTANT.URL.ADMIN.CHECKMOBILE, {mobile:this.mobile}, {emulateJSON:true}).then(res => {
                 let data = res.data;
                 if(data.status == 200){
                    if(data.data.bussData){
                        console.log('手机号通过验证');
                        this.getCode();
                    }
                    else{
                        this.$message({
                            type: 'warning',
                            message:'该手机号不存在!'
                        });
                        this.codeLock = false;
                        return false;
                    }
                 }
                 else{
                    this.$message({
                         type: 'warning',
                         message:data.msg
                    });
                    this.codeLock = false;
                    return false;
                 }
            }, res => {
                 // error callback
            });
        },
        getCode(){
            let param = {mobile:this.mobile,mobileCodeType:'reset_admin_user_pwd'};
            this.$http.post(CONSTANT.URL.ADMIN.SENDCODE, JSON.stringify(param), {emulateJSON:true}).then(res => {
                 let data = res.data;
                 if(data.status == 200){
                    let seconds = 60;
                    let timer = setInterval(()=>{
                        seconds--;
                        this.codeText = seconds + 's后重新获取';
                        if(seconds == 0){
                            clearInterval(timer);
                            this.codeText = '重新获取';
                            this.codeLock = false;
                        }
                    },1000)
                    this.$message({
                         type: 'success',
                         message:'已发送至手机'
                    });
                 }
                 else{
                    this.$message({
                         type: 'warning',
                         message:data.msg
                    });
                    this.codeLock = false;
                    return false;
                 }
            }, res => {
                 // error callback
            });
        },
        modify(){
            if(this.modifyLock){ return false ;}
            if(!this.mobile){ this.$message({type:'warning',message:'手机号不能为空'}); return false;}
            if(this.mobile && !(/^1[34578]\d{9}$/.test(this.mobile))) {this.$message({type:'warning',message:'手机号不合法'}); return false;return false;}
            if(!this.code){ this.$message({type:'warning',message:'验证码不能为空'}); return false;}
            if(!this.newPWD){ this.$message({type:'warning',message:'密码不能为空'}); return false;}
            if(!this.confirmNewPWD){ this.$message({type:'warning',message:'请确认新密码'}); return false;}
            if(this.newPWD != this.confirmNewPWD){ this.$message({type:'warning',message:'两次密码输入不一致'}); return false;}
            this.modifyLock = true;
            let param = {
                mobile:this.mobile,
                code:this.code,
                newPWD:this.newPWD,
                confirmNewPWD:this.confirmNewPWD,
            }
            this.$http.post(CONSTANT.URL.ADMIN.RESETPASSWORD,param, {emulateJSON:true}).then(res => {
                 let data = res.data;
                 if(data.status == 200){
                    this.$message({
                        type: 'success',
                        message: '修改密码成功!'
                    });
                    this.loginShow = true;
                    this.modifyLock = false;
                 }
                 else{
                    this.$message({
                         type: 'warning',
                         message:data.msg
                    });
                    this.modifyLock = false;
                 }
             }, res => {
                 // error callback
             });
        }
    }
}
</script>

<style lang="scss" scoped>
.wrap {
    height:100%;
    background: url(../../images/web_login_bg.jpg) no-repeat center;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    z-index: 999;
}

.login-wrap {
    position:relative;
    top:150px;
    margin: 0px auto 0 auto;
    min-height: 420px;
    max-width: 420px;
    padding: 40px;
    background-color: #ffffff;
    margin-left: auto;
    margin-right: auto;
    border-radius: 4px;
    /* overflow-x: hidden; */
    box-sizing: border-box;
    .login-title {
        margin: 10px 0 0 -58px;
        padding: 18px 10px 18px 60px;
        background: #27A9E3;
        position: relative;
        color: #fff;
        font-size: 16px;
    }
    #darkbannerwrap {
        background: url(../../images/aiwrap.png);
        width: 18px;
        height: 10px;
        margin: 0 0 20px -58px;
        position: relative;
    }
    input[type=text], input[type=file], input[type=password], input[type=email], select {
        border: 1px solid #DCDEE0;
        vertical-align: middle;
        border-radius: 3px;
        height: 50px;
        padding: 0px;
        font-size: 14px;
        color: #555555;
        outline: none;
        width: 100%;
        margin-bottom: 25px;
        text-indent:1em;
    }
    .code{
        position: relative;
    }
    .code_btn{
        position: absolute;
        width: 100px;
        height: 30px;
        border:1px solid #27A9E3;
        border-radius: 10px;
        right:10px;
        top:10px;
        color: #27A9E3;
        font-size: 12px;
        text-align: center;
        line-height: 30px;
    }
    .login-tips {
        margin-top: -15px;
        margin-bottom: 20px;
        text-align: right;
        text-decoration: none;
        color: #1b66c7;
        font-size: 16px;
        cursor: pointer;
    }
    button{
        padding: 12px 24px;
        margin: 0px;
        font-size: 18px;
        line-height: 24px;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        width: 100%;
        cursor: pointer;
        color: #ffffff;
        background-color: #27A9E3;
        border-radius: 3px;
        border: none;
    }
}







</style>
